<template>
    <view class="btngroup">
        <view class="tab">
            <view class="bottom_content">
                <view class="bottom_left">
                    <view class="bottom_icon" @click="toHome">
                        <img class="bottom_img" :src="getImgOssUrl('/ui-prod-2.0.0/home_1.1.png')" />
                        <text class="bottom_text">首页</text>
                    </view>
                    <view class="bottom_icon space" @click="toCart">
                        <view class="goods_num">
                            <img class="bottom_img" :src="getImgOssUrl('/ui-prod-2.0.0/car_1.1.png')" />
                            <view v-if="props.cartCount" class="goods_icon">{{ props.cartCount }}</view>
                        </view>
                        <text class="bottom_text">购物车</text>
                    </view>
                </view>
                <!-- 虚拟商品 -->
                <view v-if="props.isVirtualGoods" class="bottom_right">
                    <button
                        v-if="[3, 4].includes(state.couponStatus) && state.goodsType == 2"
                        class="btn disabled spikes_btn">
                        兑换已结束
                    </button>
                    <button
                        v-else-if="
                            ![3, 4].includes(state.couponStatus) &&
                            state.goodsType == 2 &&
                            state.couponTimeEnd &&
                            new Date(getTime(state.couponTimeEnd)) - new Date() <= 0
                        "
                        class="btn disabled spikes_btn">
                        兑换已结束
                    </button>
                    <button
                        v-else-if="
                            (state.goodsType == 3 && state.endTime) ||
                            (state.goodsType == 3 && new Date(getTime(state.activityEndTime)) - new Date() <= 0)
                        "
                        class="btn disabled spikes_btn">
                        兑换已结束
                    </button>
                    <button
                        v-else-if="
                            state.goodsType == 2 &&
                            !state.endTime &&
                            new Date(getTime(state.couponTimeEnd)) - new Date() <= 0
                        "
                        class="btn disabled spikes_btn">
                        兑换已结束
                    </button>
                    <button
                        v-else-if="
                            (state.goodsType == 2 && state.stock < 1) ||
                            (state.goodsType == 3 &&
                                state?.pointsConfig?.limitConfig?.totalUnlimit == 0 &&
                                state?.pointsConfig?.limitConfig?.totalExchange == 0)
                        "
                        class="btn disabled spikes_btn">
                        商品已兑完
                    </button>
                    <button v-else-if="state.points > props.points && isToken" class="btn disabled spikes_btn">
                        积分不足
                    </button>
                    <button v-else class="btn two spikes_btn" @click="onSelectSkuDialog('virtual')">立即兑换</button>
                </view>
                <!-- 秒杀 -->
                <view v-else-if="state.activityType == 2" class="bottom_right">
                    <button
                        v-if="state.activityStatus == 1 && state.stock"
                        class="btn two spikes_btn"
                        @click="onSelectSkuDialog(1)">
                        非活动价购买
                    </button>
                    <button
                        v-else-if="state.activityStatus == 2 && state.stock"
                        class="btn two spikes_btn"
                        @click="onSelectSkuDialog(1)">
                        立即抢购
                    </button>
                    <button v-else-if="state.activityStatus == 2 && !state.stock" class="btn disabled spikes_btn">
                        商品已售罄
                    </button>
                    <button v-else-if="state.activityStatus == 3" class="btn disabled spikes_btn">活动已结束</button>
                    <button v-else class="btn disabled spikes_btn">商品已售罄</button>
                </view>
                <!-- 拼团 -->
                <view v-else-if="[3, 4, 5].includes(state.activityType)" class="bottom_right">
                    <button
                        v-if="state.activityStatus == 1 && state.stock"
                        class="btn two spikes_btn"
                        @click="onSelectSkuDialog(1)">
                        非活动价购买
                    </button>
                    <template v-else-if="state.activityStatus == 2 && state.stock">
                        <button class="btn first spikes_btn" @click="onSelectSkuDialog(8)">单独购买</button>
                        <button class="btn two spikes_btn" @click="onSelectSkuDialog(9)">发起拼团</button>
                    </template>
                    <button v-else-if="state.activityStatus == 3" class="btn disabled spikes_btn">活动已结束</button>
                    <button v-else class="btn disabled spikes_btn">商品已售罄</button>
                </view>
                <view v-else class="bottom_right">
                    <!-- 积分商品 -->
                    <template v-if="state.from === 'integral'">
                        <button
                            v-if="
                                state.isPointsGood &&
                                state.stock > 0 &&
                                state.onSale != 2 &&
                                (!isToken || props.points >= state.minPrice)
                            "
                            class="btn two spikes_btn"
                            @click="onSelectSkuDialog('integral')">
                            立即兑换
                        </button>
                        <button v-else class="disabled btn spikes_btn">
                            {{ getPointsText() }}
                        </button>
                    </template>
                    <template v-else>
                        <button v-if="[2, 3].includes(state.onSale)" class="btn disabled spikes_btn">
                            {{ btnName[state.onSale] }}
                        </button>
                        <template v-else>
                            <button class="btn first" @click="onSelectSkuDialog(2)">加入购物车</button>
                            <button class="'btn two'" @click="onSelectSkuDialog(3)">立即购买</button>
                        </template>
                    </template>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { reactive, watch, ref } from 'vue';
import { getImgOssUrl, checkToken } from '@/commons/utils';
import router from '@/router';
let isToken = ref();
const props = defineProps({
    data: {},
    // 购物车数量
    cartCount: {
        type: Number,
        default: 0
    },
    // 用户积分数
    points: {},
    //是否是虚拟商品
    isVirtualGoods: {
        type: Boolean,
        defaule: false
    }
});
const emit = defineEmits(['openSkuDialog']);
const btnName = {
    2: '已下架',
    3: '已售罄'
};
const toHome = () => {
    router.switchTab({ url: '/pages/tabbar/home' });
};
const toCart = () => {
    router.switchTab({ url: '/pages/tabbar/cart' });
};
const onSelectSkuDialog = type => {
    emit('openSkuDialog', type);
};
const state = reactive({});
const getPointsText = () => {
    if (!state.isPointsGood) {
        return '兑换已结束';
    } else if (state.onSale == 2) {
        return '商品已失效';
    } else if (state.stock < 1) {
        return '商品已兑完';
    } else {
        return '积分不足';
    }
};
// 兼容性问题：ios和安卓，ios不支持 2021-01-03这种，需要将“-”换为“/”即可。
const getTime = time => {
    if (time) {
        var param = time.replace(/-/g, '/');
        return param;
    }
};
watch(
    () => props.data,
    async v => {
        if (v) {
            Object.assign(state, v);
            if (state.from === 'integral' || props.isVirtualGoods) {
                isToken.value = await checkToken();
            }
        }
    },
    { immediate: true, deep: true }
);
const initData = data => {
    Object.assign(state, data);
};
defineExpose({
    initData
});
</script>

<style lang="scss" scoped>
.btngroup {
    .bottom_content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: var(--safe-area-inset-bottom);
        .bottom_left {
            display: flex;
            .goods_num {
                position: relative;
                top: 0;
                left: 0;
                .goods_icon {
                    position: absolute;
                    top: 0;
                    right: -20rpx;
                    padding: 3rpx 10rpx;
                    font-size: 18rpx;
                    background: #ffffff;
                    border-radius: 14rpx;
                    border: 2rpx solid #fe292b;
                    color: #fe292b;
                }
            }
            .space {
                margin-left: 50rpx;
            }
            .bottom_icon {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;

                .bottom_img {
                    width: 48rpx;
                    height: 48rpx;
                }
                .bottom_text {
                    font-size: 20rpx;
                    font-weight: 400;
                    color: #666666;
                    line-height: 26rpx;
                }
            }
        }
        .bottom_right {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            margin-left: 52rpx;
            .btn {
                height: 66rpx;
                flex: 1;
                padding: 0;
                margin: 0;
                background: linear-gradient(270deg, #ffbd28 0%, #ff9b28 100%);
                border-radius: 36rpx;
                font-size: 26rpx;
                font-weight: 500;
                color: #ffffff;
            }
            .disabled {
                color: #ffff !important;
                background: #cccccc !important;
            }
            .two {
                background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%) !important;
            }
            .first {
                margin-right: 18rpx;
            }
            .spikes_btn {
                flex: 1;
            }
        }
    }
}
.tab {
    width: calc(100% - 28px);
    background-color: #fff;
    padding: 6px 16px;
    position: fixed;
    bottom: 0;
    left: 0;
    box-shadow: 0px -2px 4px 0px rgba(153, 153, 153, 0.08);
}
</style>
